$(document).ready(
		function(id) {

			$('#obj_0').attr('src', 'assets/elements/Dummy.png');

			function readURL(input) {
				if (input.files && input.files[0]) {
					var reader = new FileReader();

					reader.onload = function(e) {
						$('#obj_0').attr('src', e.target.result);
					}

					reader.readAsDataURL(input.files[0]);
				}
			}

			$("#imgInp").change(function() {

				readURL(this);
			});

			var count_dropped_hits = 0;
			var data = {
				"images" : [ {
					"id" : "obj_0",
					"src" : "assets/elements/background.jpg",
					"width" : "640",
					"height" : "480"
				} ]
			};

			/* checks if an object was already registered */
			function exist_object(id) {
				for (var i = 0; i < data.images.length; ++i) {
					if (data.images[i].id == id)
						return i;
				}
				return -1;
			}

			/* triggered when stop resizing an object */
			function resizestop(event, ui) {

				var $this = $(this);
				var objid = $this.find('.ui-widget-content').attr('id');
				var objwidth = ui.size.width;
				var objheight = ui.size.height;

				var index = exist_object(objid);

				if (index != -1) {
					data.images[index].width = objwidth;
					data.images[index].height = objheight;
				}
			}
			/* objects are resizable and draggable */
			$('#objects img').resizable({

				handles : 'se',
				stop : resizestop
			}).parent('.ui-wrapper').draggable({
				revert : 'invalid'
			});

			$('#background').droppable(
					{
						accept : '#objects div', /*
													 * accept only draggables
													 * from #objects
													 */
						drop : function(event, ui) {

							var $this = $(this);
							++count_dropped_hits;
							var draggable_elem = ui.draggable;

							draggable_elem.css('z-index', count_dropped_hits);
							/* object was dropped : register it */
							var objsrc = draggable_elem.find(
									'.ui-widget-content').attr('src');

							var objwidth = parseFloat(draggable_elem
									.css('width'), 10);
							var objheight = parseFloat(draggable_elem
									.css('height'), 10);

							/*
							 * for top and left we decrease the top and left of
							 * the droppable element
							 */
							var objtop = ui.offset.top - $this.offset().top;
							var objleft = ui.offset.left - $this.offset().left;

							var objid = draggable_elem.find(
									'.ui-widget-content').attr('id');

							var index = exist_object(objid);

							if (index != -1) { // if exists
								// update top
								// and left
								data.images[index].top = objtop;
								data.images[index].left = objleft;
							} else {
								/* register new one */
								var newObject = {
									'id' : objid,
									'src' : objsrc,
									'width' : objwidth,
									'height' : objheight,
									'top' : objtop,
									'left' : objleft,
									'rotation' : '0'
								};
								data.images.push(newObject);

								
								var imgSrc = $('#image').attr('src');
								console.debug(imgSrc);
								
								if(imgSrc == null) {
									console.debug('True');
									return;
								}
								var imagePath = null;

								if (imgSrc == 'assets/elements/001.png') {
									console.debug('1');
									imagePath = 'assets/elements/chair/';
									$('#image')
									.reel(
											{
												images : imagePath
														+ '###.png',
												frames : 4,
												frame : 1,
												rows : 0,
												row : 0,
												speed : 0.3,												
												/*delay : 8,*/
												timeout:10,
												annotations : {
													"first_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 1,
														end : 20,
														x : [ 10, 15, 20,
																25, 30, 35,
																40, 45, 50,
																55, 60, 65,
																70, 75, 80,
																85, 90, 95,
																100, 105 ],
														y : 10
													},
													"last_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 101,
														end : 120,
														x : [ 105, 100, 95,
																90, 85, 80,
																75, 70, 65,
																60, 55, 50,
																45, 40, 35,
																30, 25, 20,
																15, 10 ],
														y : 175
													}
												}
											});
									

								}
								if (imgSrc == 'assets/elements/11.png') {
									console.debug('2');
									imagePath = 'assets/elements/chair1/';
									$('#image')
									.reel(
											{
												images : imagePath
														+ '###.png',
												frames : 4,
												frame : 1,
												rows : 0,
												row : 0,
												speed : 0.3,
												timeout:10,
												annotations : {
													"first_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 1,
														end : 20,
														x : [ 10, 15, 20,
																25, 30, 35,
																40, 45, 50,
																55, 60, 65,
																70, 75, 80,
																85, 90, 95,
																100, 105 ],
														y : 10
													},
													"last_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 101,
														end : 120,
														x : [ 105, 100, 95,
																90, 85, 80,
																75, 70, 65,
																60, 55, 50,
																45, 40, 35,
																30, 25, 20,
																15, 10 ],
														y : 175
													}
												}
											});

								}
								if (imgSrc == 'assets/elements/21.png') {
									console.debug('3');
									imagePath = 'assets/elements/chair2/';
									$('#image')
									.reel(
											{
												images : imagePath
														+ '###.png',
												frames : 4,
												frame : 1,
												rows : 0,
												row : 0,
												speed : 0.3,
												timeout:10,
												annotations : {
													"first_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 1,
														end : 20,
														x : [ 10, 15, 20,
																25, 30, 35,
																40, 45, 50,
																55, 60, 65,
																70, 75, 80,
																85, 90, 95,
																100, 105 ],
														y : 10
													},
													"last_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 101,
														end : 120,
														x : [ 105, 100, 95,
																90, 85, 80,
																75, 70, 65,
																60, 55, 50,
																45, 40, 35,
																30, 25, 20,
																15, 10 ],
														y : 175
													}
												}
											});

								}
								
								if (imgSrc == 'assets/elements/31.png') {
									console.debug('3');
									imagePath = 'assets/elements/chair4/';
									$('#image')
									.reel(
											{
												images : imagePath
														+ '###.png',
												frames : 4,
												frame : 1,
												rows : 0,
												row : 0,
												speed : 0.3,
												timeout:10,
												annotations : {
													"first_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 1,
														end : 20,
														x : [ 10, 15, 20,
																25, 30, 35,
																40, 45, 50,
																55, 60, 65,
																70, 75, 80,
																85, 90, 95,
																100, 105 ],
														y : 10
													},
													"last_row" : {
														node : {

															css : {
																width : 300
															}
														},
														start : 101,
														end : 120,
														x : [ 105, 100, 95,
																90, 85, 80,
																75, 70, 65,
																60, 55, 50,
																45, 40, 35,
																30, 25, 20,
																15, 10 ],
														y : 175
													}
												}
											});

								}

								

							}
						}
					});

		});